<!--
	作者：779744514@qq.com
	时间：2015-08-19
	描述：AngularJS中使用表单验证功能
-->
<!DOCTYPE html>
<html ng-app="myApp">
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/angular.js"></script>
		<style type="text/css">
			input.ng-invalid{
				border: 1px solid #FF0000;
			}
			input.ng-valid{
				border: 1px solid #3ff;
			}
			input.ng-pristine {
				
			}
             input.ng-dirty {
             	
             }
			.error{
				color: red;
			}
			.row{
				margin-bottom: 10px;
			}
		</style>
	</head>
	<body>
		<form name="signup_form" novalidate ng-submit="signupForm()">
		<fieldset>
			<legend>Signup</legend>
			<div class="row">
				<div class="">
					<label>Your name</label>
					<input ng-class="{error:signup_form.name.$dirty&& signup_form.name.$invalid}" 
						type="text"
						placeholder="Name"
						name="name"
						ng-model="signup.name"
						ng-minlength="3"
						ng-maxlength="20"  ng-focus  required/>
				<!--
                	作者：779744514@qq.com
                	时间：2015-08-19
                	描述：!signup_form.name.$focused当失去焦点时验证错误
                -->
					<div class="error" 
						ng-show="signup_form.name.$dirty && signup_form.name.$invalid &&
						!signup_form.name.$focused">
						<!--
                        	作者：779744514@qq.com
                        	时间：2015-08-19
                        	描述：点击提交后显示验证信息
                        <div class="error" 
                             ng-show="signup_form.name.$dirty && signup_form.name.$invalid && signup_form.submitted">
                        -->
						<small class="error"
							ng-show="signup_form.name.$error.required">
							Your name is required.
						</small>
						<small class="error"
							ng-show="signup_form.name.$error.minlength">
							Your name is required to be at least 3 characters.
						</small>
						<small class="error"
							ng-show="signup_form.name.$error.maxlength">
							Your name cannot be longer than 20 characters.
						</small>
					</div>	
				</div>
			</div>
			<div class="row">
				<div >
					<label>Your email</label>
					<input ng-class="{error:signup_form.email.$dirty&& signup_form.email.$invalid}" 
						type="email"
						placeholder="Email"
						name="email"
						ng-model="signup.email" 
						ng-minlength="3"
						ng-maxlength="20" ng-focus   required/>
					<div class="error"
						ng-show="signup_form.email.$dirty && signup_form.email.$invalid &&
						!signup_form.email.$focused">
						<small class="error"
							ng-show="signup_form.email.$error.required">
							Your email is required.
						</small>
						<small class="error"
							ng-show="signup_form.email.$error.minlength">
							Your email is required to be at least 3 charaters.
						</small>
						<small class="error"
							ng-show="signup_form.email.$error.email">
							That is not a valid email.Please input a valid email.
						</small>
						<small class="error"
							ng-show="signup_form.email.$error.maxlength">
							Your email cannot be longer than 20 characters.
						</small>
					</div>
				</div>
			</div>
			<div>
				<label>Username</label>
				<input ng-class="{error:signup_form.username.$dirty&& signup_form.username.$invalid}"
					type="text"
					placeholder="Desired uername"
					name="username"
					ng-model="signup.username"
					ng-minlength="3" 
					ng-maxlength="20"
					ensure-unique="username" ng-focus required/>
				<div class="error" 
					ng-show="signup_form.username.$dirty && signup_form.username.$invalid &&!signup_form.username.$focused">
    				<small class="error" 
    					ng-show="signup_form.username.$error.required">
    					Please input a username.
    				</small>
    				<small class="error" 
    					ng-show="signup_form.username.$error.minlength">
    					Your username is required to be at least 3 characters.
    				</small>
    				<small class="error" 
    					ng-show="signup_form.username.$error.maxlength">
    					Your username cannot be longer than 20 characters.
    				</small>
    			<!--
                	作者：779744514@qq.com
                	时间：2015-08-19
                	描述：检查用户名是否存在  为自定义指令ensureUnique
                    <small class="error" 
    					ng-show="signup_form.username.$error.unique">
    					That username is taken, please try another.
    				</small>
    			-->		
 				</div>
			</div>
			<button type="submit" class="button radius"
				ng-disabled="signup_form.$invalid">Submit</button>
		</fieldset>
		</form>
		<script type="text/javascript">
				/*点击提交后显示验证信息
				 * var app=angular.module('myApp',[]);
				app.controller('signupController', ['$scope', function($scope) {
 					$scope.submitted = false;
 							 $scope.signupForm = function() {
   								 if ($scope.signup_form.$valid) {
     								 // Submit as normal
  									  } else {
     						 $scope.signup_form.submitted = true;
    							}
  							}
						}]);
					*/
			/*	
			 * 检查用户名是否存在，此处后台方法不正确
			 * app.directive('ensureUnique', ['$http', function($http) {
                    return {
                         	require: 'ngModel',
                         	link: function(scope, ele, attrs, c) {
      						scope.$watch(attrs.ngModel, function() {
        					$http({
          							method: 'POST',
        							url: '/api/check/' + attrs.ensureUnique,
          							data: {'field': attrs.ensureUnique}
       							 }).success(function(data, status, headers, cfg) {
          							c.$setValidity('unique', data.isUnique);
        							}).error(function(data, status, headers, cfg) {
          							c.$setValidity('unique', false);
       							 });
     						 });
    						}
						  }
						}]);
				*/		
						app.directive('ngFocus', [function() {
          					var FOCUS_CLASS = "ng-focused";
 							return {
   								 restrict: 'A',
    							 require: 'ngModel',
    							link: function(scope, element, attrs, ctrl) {
      								ctrl.$focused = false;
      								element.bind('focus', function(evt) {
        								element.addClass(FOCUS_CLASS);
        								scope.$apply(function() {ctrl.$focused = true;});
      								}).bind('blur', function(evt) {
        								element.removeClass(FOCUS_CLASS);
        								scope.$apply(function() {ctrl.$focused = false;});
      								});
    							}
  							}
						}]);
						
		</script>
	</body>
</html>
